<template>
  <div>
    <table class="table_order" border="0" cellspacing="0" cellpadding="0">
      <tr class="bg">
        <td colspan="4"><div class="title">订单信息确认</div></td>
      </tr>
      <tr>
        <td class="left">收货人</td>
        <td><input type="text" :readonly="readonly" v-model="datalist.consignee" /></td>
        <td class="left">联系电话</td>
        <td><input type="text" :readonly="readonly" v-model="datalist.mobile" /></td>
      </tr>
      <tr>
        <td class="left">详细地址</td>
        <td colspan="3">
          <input v-if="!readonly" type="text" style="width:45%" :readonly="readonly" v-model="datalist.area" />
          <input v-if="!readonly" type="text" style="width:45%" :readonly="readonly" v-model="datalist.DetailedAddress" />
          <span v-else>{{datalist.area + datalist.DetailedAddress}}</span>
        </td>
      </tr>
      <tr>
        <td class="left">运输线路</td>
        <td colspan="3">
          <select v-model="datalist.LineType" :disabled="readonly">
            <option value="邮政EMS">邮政EMS</option>
            <option value="邮政空运">邮政空运</option>
            <option value="邮政海运">邮政海运</option>
          </select>
        </td>
      </tr>
      <tr class="bg">
        <td colspan="4"><div class="title">申报明细</div></td>
      </tr>
      <tr>
        <td colspan="4" class="maxw">
          <div style="padding-bottom: 10px;" v-if="!readonly">
            <button @click="addMx">添加一行</button>
          </div>
          <table border="0" cellspacing="0" cellpadding="0" class="maxw itemTable">
            <tr class="bg">
              <th>序号</th>
              <th>商品名称(中文或英文)</th>
              <th>数量</th>
              <th>单价</th>
              <th>合计金额(￥)</th>
            </tr>
            <tr v-for="(item, index) in datalist.list_datalist_sb" :key="index">
              <td>{{ index + 1 }}</td>
              <td><input type="text" :readonly="readonly" @input="update" v-model="item.name" /></td>
              <td><input type="number" min="1" :readonly="readonly" @input="update" v-model="item.num" /></td>
              <td><input type="number" min="1" :readonly="readonly" @input="update" v-model="item.price" /></td>
              <td>{{ item.num * item.price }}</td>
            </tr>
            <tr>
              <td colspan="5">物品数量：{{ sb_num }} 申报金额：{{ sb_price }}</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr class="bg">
        <td colspan="4"><div class="title">增值服务</div></td>
      </tr>
      <tr>
        <td class="left">打包加固</td>
        <td>
          <select v-model="datalist.IsReinforce" :disabled="readonly">
            <option value="普通加固">普通加固</option>
            <option value="易碎品加固(收费,推荐)">易碎品加固(收费,推荐)</option>
            <option value="不加固(不建议)">不加固(不建议)</option>
          </select>
        </td>
        <td class="left">保留票据</td>
        <td>
          <select v-model="datalist.KeepReceipts" :disabled="readonly">
            <option value="是">是</option>
            <option value="否(取出,不保留)">否(取出,不保留)</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="left">投保类型</td>
        <td>
          <select v-model="datalist.InsuranceType" :disabled="readonly">
            <option value="免费保险">邮政【其他无效】-免费保险(最高赔付2000元人民币)</option>
            <option value="土人保险">邮政【其他无效】-土人保险(保费投保金额的1.2%)</option>
          </select>
        </td>
        <td class="left">投保金额</td>
        <td>{{ datalist.InsuranceType == '免费保险' ? '0' : datalist.InsuranceMoney }}</td>
      </tr>
      <tr>
        <td class="left">打包备注</td>
        <td colspan="3"><input type="text" :readonly="readonly" v-model="datalist.descr" /></td>
      </tr>
      <tr class="bg">
        <td colspan="4"><div class="title">包裹/商品信息</div></td>
      </tr>
      <tr>
        <td colspan="4" class="maxw">
          <div style="padding-bottom: 10px;" v-if="!readonly">
            <button @click="addBg">添加一行</button>
          </div>
          <table border="0" cellspacing="0" cellpadding="0" class="maxw itemTable">
            <tr class="bg">
              <th>序号</th>
              <th>快递单号</th>
              <th>包裹备注</th>
              <!-- <th>库存天数</th>
              <th>超期库存费</th>
              <th>数量</th> -->
              <th>重量</th>
            </tr>
            <tr v-for="(item, index) in datalist.list_info" :key="index">
              <td>{{ index + 1 }}</td>
              <td><input type="text" :readonly="readonly" v-model="item.OverseasCourierNumber" /></td>
              <td><input type="text" :readonly="readonly" v-model="item.notes" /></td>
              <!-- <td></td>
              <td></td>
              <td></td> -->
              <td><input type="text" :readonly="readonly" v-model="item.weights" /></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr class="bg">
        <td colspan="4"><div class="title">说明</div></td>
      </tr>
      <tr>
        <td colspan="4">
          <div class="comm">
            1、收货时请务必当面确认包裹完好与重量，重量不对请邮政当场开证明，事后少东西若邮政不予证明、损失自负；
            2、一旦进入打包程序后不可修改取消，可联系客服咨询打包进程，打包完成情况下，若修改订单，返工费30元。
            3、订单提交后，仓库打包完成有短信通知，收到通知后请及时登录网站付款，未付款将无法出库。
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'tables',
  props: {
    data: {},
    // sb_price: '',
    // sb_num:"",
    readonly: {
      default: true
    }
  },
  data() {
    return {
      datalist: {},
      sb_num: 0,
      sb_price: 0
    };
  },
  methods: {
    addMx(){
      //添加明细
      this.datalist.list_datalist_sb.push({
        name:"",
        num:'',
        price:''
      })
      this.$forceUpdate()
    },
    addBg(){
      //添加包裹
      this.datalist.list_info.push({
        OverseasCourierNumber:"",
        notes:'',
        weights:''
      })
      this.$forceUpdate()
    },
    update() {
      var data = this.datalist.list_datalist_sb;
      this.$forceUpdate();
      this.sb_num = data.reduce((prev, next) => {
        return prev + +next.num;
      }, 0);
      this.sb_price = data.reduce((prev, next) => {
        return prev + next.price * next.num;
      }, 0);
    }
  },
  mounted() {
    this.datalist = this.data;
    if(this.data.id){
      this.datalist.list_datalist_sb = this.data.DeclareInfo.split('#').map(item => {
        var li = item.split('|');
        return {
          name: li[0],
          num: parseInt(li[1]),
          price: parseFloat(li[2])
        };
      });
      this.datalist.list_info = this.data.ShippingList.split('#').map(item => {
        var li = item.split('|');
        return {
          OverseasCourierNumber: li[0],
          notes: li[1],
          weights: li[2]
        };
      });
      this.update();
    }else{
      this.datalist.list_info = []
      this.datalist.list_datalist_sb = []
    }

    console.log(this.datalist);

  }
};
</script>

<style lang="scss" scoped>
.table_order {
  border: 1px solid #999;
  border-bottom-width: 0;
  border-right-width: 0;
  width: 100%;
  input {
    width: 100%;
    border: none;
    outline: none;
    background-color: transparent;
  }
  .title {
    font-size: 20px;
    font-weight: 600;
  }
  .comm {
    white-space: pre-line;
  }
  tr {
    &.bg {
      background-color: #eee;
    }
  }
  .maxw {
    width: 100%;
  }
  .itemTable {
    border: 1px solid #999;
    border-bottom-width: 0;
    border-right-width: 0;
  }
  td,
  th {
    padding: 10px;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    &.left {
      text-align: right;
      width: 15%;
    }
    width: auto;
  }
}
</style>
